<template>
  <div class="login-container">
    <div class="form-container sign-in-container">
        <el-form  ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px;" >
          <div class="headstyle" >
            <!-- style="display: block;margin-left: -15px;width: 130px;height: 110px;" -->
            <img id="logo" :src="logoMini" >
            <span style="font-family: '隶书'; font-size: 35px;">中山大学</span>
            <span style="margin: 0 5px;"> | </span>
            <span style="font-family: '方正舒体'; font-size: 35px;">数字百团</span>
          </div>
          <div >
            <!-- lable添加文字 -->
            <el-form-item prop="email" style="margin-top: 50px;margin-left: 100px;">
              <el-input class="input_text" type="email" v-model="loginForm.email" placeholder="请输入邮箱" style="width: 500px;">
                <template #prefix>
                  <el-icon class="el-input__icon" ><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <div >
            <el-form-item prop="password" style="margin-top: 30px;margin-left: 100px;">
              <el-input class="input_text" :type="isShowPassword ? 'text' : 'password'" v-model="loginForm.password"
              style="width: 500px;" @keyup.enter="handleLogin" placeholder="请输入密码">
                  <template #prefix>
                      <el-icon class="el-input__icon"><Unlock /></el-icon>
                  </template>
                  <template #suffix>
                      <i class="iconfont el-input__icon login-content-password" @click="isShowPassword = !isShowPassword">
                          <img :src="biyan" alt="biyan" v-if="isShowPassword">
                          <el-icon v-if="!isShowPassword"><View /></el-icon>
                      </i>
                  </template>
              </el-input>
            </el-form-item>
          </div>
          <button type="button" @click="handleLogin()" style=" margin-left:220px;margin-top: 50px;width: 80px;height: 30px;display: flex; justify-content: center; align-items: center; font-size: 15px;">登录</button>
        </el-form>
      </div>
  </div>
</template>

<script>
import logoMini from "@/assets/logo-mini.svg"
import biyan from "@/assets/iconfont-biyan.svg"
// import {LoginJudge} from "@/api/LoginApi.js"
import axios from 'axios'
import { ElMessage } from 'element-plus'


export default {
  data() {
    return {
      username: '',
      password: '',
      captcha: '',
      logoMini,
      biyan,
      captchaImage: '', // Placeholder for captcha image URL
      uid: '202',
      isPanelActive: false,
      isShowPassword: false,
      captchaSrc:'',
      loginForm: {
        email: '',
        password: '',
        verifyCode: '',
        verifyKey: ''
      },
      loginRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    async handleLogin() {
      try {
        const formData = new FormData();
        formData.append('email', this.loginForm.email);
        formData.append('password', this.loginForm.password);
        const response = await axios.post('/login', formData);
        this.$store.dispatch('saveUserInfo', response.data.data.user);
        ElMessage.success("登录成功！");
        await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒钟
        this.$router.push('/homepage');
      } catch (error) {
        console.log(error);
      }
    },
    async getCaptcha() {
      // try {
      //   const res = await captcha();
      //   this.captchaSrc = res.data.img;
      //   this.verifyKey = res.data.key;
      // } catch (error) {
      //   console.error('Error fetching captcha:', error);
      // }
      this.captchaImage = 'http://example.com/captcha?timestamp=' + Date.now();
    }
  },
  mounted() {
    // Fetch initial captcha image on component mount
    this.getCaptcha();
  }
}
</script>

<style scoped>
.login-container {
  padding: 20px;
  border: 1px solid #144920;
  background: #fbfbfb;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(10, 66, 23, 0.22), 0 10px 10px rgba(10, 66, 23, 0.22);
  position: relative;
  margin: 0 auto;
  width: 500px;
  max-width: 100%;
  min-height: 380px;
  margin-top: 120px;
}
.headstyle {
  margin-top: 30px;
  margin-left: 70px;
  white-space: nowrap; /* 防止换行 */
}
.login-content-password {
  display: inline-block;
  width: 20px;
  cursor: pointer;
}
.login-content-password :hover {
    color: #909399;
}
.form-container {
  height: 100%;
  transition: all .6s ease-in-out;
}

.form-container button {
  background-image: linear-gradient(120deg,#429dda,#a1c4fd,#cc9ce0);
  border: none;
  background-size: 200%;
  color: #fff;
  transition: .5s;
}

.form-container button:hover {
  background-position: right;
}

.sign-in-container {
  left: 200;
  width: 80%;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

img {
  cursor: pointer;
}
</style>
